<template>
  <FullPage class="home" header-style="padding:0;" body-style="padding:0;">
    <template #header>
      <Head isBg :fixed="false" type="level_2" name="桃奢" />
    </template>
    <scroll-view
      class="scroll-view"
      :scroll-with-animation="true"
      :scroll-top="state.scrollTop"
      @scrolltolower="onReachBottom"
      scroll-x="false"
      scroll-y="true"
      :show-scrollbar="false"
    >
      <!-- 骨架 -->
      <Skeletons v-if="state.login" />
      <uv-empty
        marginTop="25vh"
        v-else-if="!state.productList.length"
        mode="data"
        text="暂无数据"
        icon="https://lehuopai-1311286543.cos.ap-guangzhou.myqcloud.com/img/my/icon_empty.png"
        width="80"
        height="80"
        textColor="#999999"
      ></uv-empty>
      <view v-else class="list2">
        <!-- 轮播1 -->
        <uv-swiper
          indicatorActiveColor="#FF4949"
          :indicator="state.bannerList_1?.length > 1"
          circular
          indicatorMode="dot"
          radius="15px"
          height="140"
          keyName="banner_url"
          :list="state.bannerList_1"
          @click="onBannerClick_1"
        ></uv-swiper>
        <!-- end -->

        <!-- 分类 -->
        <shopGrid :list="state.baseList" />
        <!-- end -->

        <!-- 轮播2 -->
        <view style="margin: 20px 0">
          <uv-swiper
            class="swiper-two"
            indicatorActiveColor="#FF4949"
            :indicator="state.bannerList_2?.length > 1"
            circular
            indicatorMode="dot"
            radius="15px"
            height="104"
            keyName="banner_url"
            imgMode="widthFix"
            :list="state.bannerList_2"
            @click="onJumpRouter"
            bgColor="transparent"
          ></uv-swiper>
        </view>
        <!-- end -->

        <!-- 轮播3 -->
        <uv-swiper
          indicatorActiveColor="#FF4949"
          :indicator="state.bannerList_3?.length > 1"
          circular
          indicatorMode="dot"
          radius="15px"
          height="150"
          keyName="banner_url"
          :list="state.bannerList_3"
          @click="onBannerClick_3"
        ></uv-swiper>
        <!-- end -->
        <view class="shopList">
          <view class="items">
            <ShopCard
              v-for="(item, index) in state.productList"
              :key="index"
              :item="item"
              :height="state.image_height"
            />
            <uv-load-more
              v-if="!!state.productList.length"
              customStyle="padding-bottom: 20px;"
              :status="state.login? 'loading' : 'nomore'"
              line
            />
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 弹出 -->
    <ConsultationPop />
  </FullPage>
</template>
<script lang="ts" setup>
import { pxtoRpx } from "@/utils/shopUtils/index";
import ShopCard from "../components/shopCard.vue";
import ShopGrid from "../components/shopGrid.vue";
import Head from "@/components/Head/head.vue";
import ConsultationPop from "@/components/ConsultationPop/index.vue";
import Skeletons from "@/components/Skeletons/skeletons.vue";
import {
  shopApiProductList,
  shopApiGetCategory,
  shopApiBanner
} from "@/api/shopApi/index";
import FullPage from "@/components/Layout/FullPage.vue";

import { reactive } from "vue";
import { onMounted } from "vue";

interface IState {
  productList: any;
  c_width: number;
  c_height: number;
  image_height: number;
  back_to_top: boolean;
  scrollTop: number;
  page: number;
  per_page: number;
  total: number;
  login: boolean;
  bannerList_1: any;
  bannerList_2: any;
  bannerList_3: any;
  baseList: any;
}

const state = reactive<IState>({
  productList: [],
  c_width: uni.getSystemInfoSync().windowWidth,
  c_height: uni.getSystemInfoSync().windowHeight,
  image_height: 0,
  back_to_top: false,
  scrollTop: 0,
  page: 1,
  per_page: 20,
  total: 0,
  login: false,
  bannerList_1: [],
  bannerList_2: [],
  bannerList_3: [],
  baseList: []
});

const onBannerClick_1 = (e: number) => {
  const id = state.bannerList_1[e]?.uuid;
  uni.navigateTo({
    url: "/pages/shop/index/goods_info?id=" + id
  });
};
const onBannerClick_3 = (e: number) => {
  const id = state.bannerList_3[e]?.uuid;
  uni.navigateTo({
    url: "/pages/shop/index/goods_info?id=" + id
  });
};
const onJumpRouter = (e: number) => {
  const item = state.bannerList_2[e];
  if (item?.type === 2) {
    uni.navigateTo({
      url: item.jump_route
    });
  }

  if (item?.type === 1) {
    uni.navigateTo({
      url: "/pages/shop/index/goods_info?id=" + item.id
    });
  }
};

const initBanner = async () => {
  //pos 展示位，1-详情页，2-首页上端，3-首页中端，4-首页下端
  const param = {
    type: 2
  };
  const { data } = await shopApiBanner();
  if (data.error_code === 0) {
    data.data.forEach((item: any) => {
      switch (item.pos) {
        case 2:
          state.bannerList_1.push(item);
          break;
        case 3:
          state.bannerList_2.push(item);
          break;
        case 4:
          state.bannerList_3.push(item);
          break;
      }
    });
  }
};

const onReachBottom = async () => {
  if (state.total <= state.productList.length) {
    //总条数等于当前返回条数
    // uni.showToast({
    //   title: "没有更多内容了~",
    //   icon: "none",
    // });
  } else {
    // uni.showToast({
    //   title: "加载中...",
    //   icon: "none",
    // });
    state.page = state.page + 1;
    initList();
  }
};

// 获取分类列表
const initCategoryList = async () => {
  const { data } = await shopApiGetCategory();
  console.log(data.data);

  state.baseList = data.data;
};

// 获取商品列表
const initList = async () => {
  const param = {
    per_page: 20,
    page: state.page
  };
  const { data } = await shopApiProductList(param);
  state.total = data.data.total;
  state.productList = state.productList.concat(data.data.data);
  state.login = false;
};

onMounted(() => {
  var w = pxtoRpx(state.c_width);
  state.image_height = parseInt(w * 0.44);
  state.login = true;
  initList();
  initBanner();
  initCategoryList();
});
</script>

<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.scroll-view {
  width: 100%;
  height: 100%;
}

.shopList {
  padding: 20px 0 0px 0;
}

.list2 {
  width: 92%;
  padding: 15px 4%;
  height: 100%;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/Group47624.png");
  background-repeat: no-repeat;
  background-position: 50% -20%;
}

.back_to_top {
  position: fixed;
  bottom: 200rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background: #333;
  color: #fff;
  border: solid 1rpx #fff;
  line-height: 100rpx;
  text-align: center;
  border-radius: 10rpx;
  border: solid 1rpx #333;
}
.swiper-two {
  margin: 20px 0;
}
</style>
